<template>
	<view class="app">
		<view class="header">
			<view class="img-view">
				<!-- <image class="img" mode="aspectFill" :src="bgSrc"></image> -->
			</view>
			<view class="time-view">
				<transition name="slide-fade">
					<view v-if="queryTimeFn()">
						<view class="time-text" @click="show.pay_time = true">{{ queryTimeFn() }}</view>
					</view>
				</transition>
			</view>
			<view class="data-view">
				<view class="data-per">
					<view
						class="data-per-item"
						@click="pageToRecord(1)"
					>
						<view class="item-text">
							<text>￥</text>
							<u-count-to
								:start-val="0"
								:end-val="$fn.priceFilter($fn.getData(data, 'stats.cacl_goods_payment_amount_1', 0))"
								:duration="600"
								:decimals="2"
								font-size="32"
								bold
							></u-count-to>
						</view>
						<view class="txt-green">直推业绩</view>
					</view>
					<view
						class="data-per-item end"
						@click="pageToRecord(2)"
					>
						<view class="item-text">
							<text>￥</text>
							<u-count-to
								:start-val="0"
								:end-val="$fn.priceFilter($fn.getData(data, 'stats.cacl_goods_payment_amount_2', 0))"
								:duration="600"
								:decimals="2"
								font-size="32"
								bold
							></u-count-to>
						</view>
						<view class="txt-red">间推业绩</view>
					</view>
				</view>
				<view class="header-avatar">
					<u-avatar size="120" :src="vk.getVuex('$user.userInfo.avatar')"></u-avatar>
				</view>
			</view>
		</view>

		<!-- 页面内容开始 -->
		<view>
			<view class="notice-style">
				<u-notice-bar
					mode="vertical"
					:list="noticeList"
					:autoplay="false"
					speed="100"
					duration="4000"
				></u-notice-bar>
			</view>

			<view class="empty-style">
				<view>
					<view class="last-update">
						<!-- <view style="flex: 5;">统计：{{ queryTimeFn("yyyy-MM-dd hh:mm:ss") }}</view> -->
						<view style="flex: 5;">本次查询时间：{{ $fn.timeFormat(data.lastUpdateTime) }}</view>
					</view>
					<performance-list ref="performanceList" @success="performanceQuery"></performance-list>
				</view>
			</view>
		</view>

		<!-- 日历范围选择组件 -->
		<u-calendar
			v-model="show.pay_time"
			mode="range"
			safe-area-inset-bottom
			btn-type="default"
			active-bg-color="var(--main,#2979ff)"
			range-bg-color="var(--secondary,rgba(41,121,255,0.13))"
			@change="calendarChange"
		></u-calendar>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading" delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
import performanceList from "./components/performance-list"
export default {
	components:{
		performanceList
	},
	data() {
		// 页面数据变量
		return {
			loading: false,
			// init请求返回的数据
			data: {
				// 业绩相关的所有信息
				query: {},
				stats:{
					cacl_goods_payment_amount:"-",
					reward:"-"
				}
			},
			scrollTop: 0,
			// 页面上所有弹窗的开关
			show: {
				pay_time: false, // 高级搜索弹窗中的日历选择弹窗开关
			},
			// bgSrc:
			// 	"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg01.taopic.com%2F180706%2F235103-1PF606423767.jpg&refer=http%3A%2F%2Fimg01.taopic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640422675&t=901c07a36bd5bda40df30722cb75efb2",
			noticeList: [
				"只显示有业绩产生的用户！",
				"业绩统计可能会有延迟，一般在1小时之内！",
				"点击下方搜索框右边的三横杠可以进行高级搜索！"
			]
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		this.init();
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init() {
			let that = this;
			let options = that.options;
			that.$refs.performanceList.search();
		},
		pageTo(url) {
			vk.navigateTo(url);
		},
		// 监听 - 日历组件的change事件
		calendarChange(e) {
			let that = this;
			let pay_time = [
				vk.pubfn.toTimeLong(e.startDate + " 00:00:00"),
				vk.pubfn.toTimeLong(e.endDate + " 23:59:59")
			];
			that.$refs.performanceList.queryForm1.formData.pay_time = pay_time;
			that.$refs.performanceList.search();
		},
		pageToRecord(type, user_id){
			let that = this;
			let query = that.data.query;
			let url = `./record?type=${type}&startTime=${query.startTime}&endTime=${query.endTime}`;
			if (user_id) {
				url += `&user_id=${user_id}`;
			}
			vk.navigateTo(url);
		},
		nameFn(userInfo){
			return vk.myfn.salesman.getName(userInfo);
		},
		queryTimeFn(s = "yyyy年MM月dd日") {
			let that = this;
			let { startTime, endTime } = that.data.query;
			let startTimeStr = vk.pubfn.timeFormat(startTime, s);
			let endTimeStr = vk.pubfn.timeFormat(endTime, s);
			let str = "";
			if (startTimeStr != endTimeStr) {
				str = `${startTimeStr} ~ ${endTimeStr}`;
			} else {
				str = startTimeStr;
			}
			return str;
		},
		performanceQuery(data){
			this.data = data;
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.app {
	min-height: 100vh;
	background-color: #efefef;

	.header {
		position: relative;
		.img-view {
			width: 100%;
			height: 300rpx;
			background-image: linear-gradient(to bottom, var(--main), var(--secondary));
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.time-view {
			position: absolute;
			width: 100%;
			text-align: center;
			top: 30rpx;
			.time-text {
				font-weight: bold;
				color: #ffffff;
			}
		}
		.data-view {
			position: relative;
			width: 96%;
			height: 180rpx;
			margin: -50rpx auto 0px auto;
			background-color: white;
			.header-avatar {
				position: relative;
				top: -240rpx;
				width: 120rpx;
				margin: 0 auto;
			}
			.data-per {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.data-per-item {
					flex: 1;
					text-align: center;
					display: flex;
					flex-flow: column;
					border-right: 4rpx double #cccccc;
				}
				.data-per-item.end {
					border-right: 0;
				}
				.item-text {
					font-size: 32rpx;
					font-weight: bold;
				}
				.txt-green {
					margin-top: 12rpx;
					color: #19b16b;
					font-size: 26rpx;
				}
				.txt-red {
					margin-top: 12rpx;
					color: #19b16b;
					font-size: 26rpx;
				}
			}
		}
	}

	.notice-style {
		margin-top: 10px;
		width: 100vw;
	}
	.empty-style {
		width: 96vw;
		margin: 0px auto;
		margin-top: 20rpx;
		margin-left: 16rpx;
	}

	.last-update {
		margin: 20rpx 0rpx 20rpx 0rpx;
		color: #666666;
		display: flex;
		font-size: 24rpx;
	}

	.slot-content {
		text-align: center;
		padding: 38rpx;
		font-size: 28rpx;
		text-align: center;
		color: rgb(96, 98, 102);
		text-align: center;
	}
	.green {
		color: #19b16b;
	}
}

.vk-data-list-item {
	padding: 20rpx 30rpx;
	display: flex;
}

/* 高级搜索弹窗 */
.search-popup {
	background-color: #f3f3f3;

	.scroll-view {
		flex: 1;
		height: 1024rpx;
		padding: 0;
	}

	.confrim-btn {
		display: flex;

		.btn {
			flex: 1;
			display: block;
			text-align: center;
			line-height: 80rpx;
		}

		.reset {
			color: #404040;
			background-color: #ffffff;
		}

		.confirm {
			background-color: var(--main);
			color: #ffffff;
		}

		.btn:active {
			opacity: 0.7;
		}
	}

	::v-deep .u-form-item {
		background-color: #ffffff;
		display: block;
		padding: 20rpx;
		color: #7e7e7e;
		padding-top: 6rpx;
		color: #262626;
		margin-bottom: 20rpx;
	}

	.date-range {
		text-align: center;
		background-color: #f6f6f6;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #7f7f7f;
		width: 100%;
	}
}

/* 动画开始 */
.slide-fade-enter-active {
	transition: all 0.3s ease;
	transform: scale(1.2);
	transform: prven;
	font-weight: bolder;
}
.slide-fade-leave-active {
	transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
	transform: translateX(10px);
	opacity: 0;
}
/* 动画结束 */
.main-color{
	color:var(--main)
}
</style>
